<template>
  <div >
    <div class="height"></div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <a href="/show">
          <img :src="item.img" alt="" />
          {{ item.text }}
        </a>
      </li>
    </ul>
    <div class="height"></div>
  </div>
</template>

<script>
import goodsApi from "../api/goodsApi";
export default {
  data() {
    return {
      num: "",
      list: [
        //留一份数据，进来时不会出现空页面的情况
        {
          img: "/img/3c75af8c9c3d9ff1fb37c826958312bb.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t跑步鞋 \n\t\t\t\t\t",
          category: "1",
          path: "/show"
        },
        {
          img: "/img/492c4279899a670ce4f538cf2420b28f.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t休闲鞋 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/6b744294c2b8a624d6889b168ba27771.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t运动生活板鞋 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/7bbb5b9b14c542acee23e2a9597297dd.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t帆布鞋 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/45e662c6425b17dd3a9f99b507291ea1.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t篮球鞋 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/dfca67d03d6f1e5078e4dc503a4dd33d.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t复古休闲鞋 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/28bd6395b74fdab2206edd4fc087363e.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\tAIR MAX \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/2c6c41978afedf1d8b7f4b4f3368869e.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t贝壳头 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/af3f08a334bbf0292c275270b6634003.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t综训鞋 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/3745783a5e37bee3eab5204b0c725818.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t户外鞋 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/dcb18c2b83c1e20aa1c5689620a8de93.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t网球鞋 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/6617093c9a225bf0571dee8f12d4685a.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t滑板鞋 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/4d05b9730b617d197eebd5afb95ae81a.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t凉鞋/凉拖 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/6277c6b8557d7618bb8dbab24e116df4.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t小椰子 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/f9d6cfdcf492a74e3ace59bbb1d3035b.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t健步鞋 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/1e241c81fde564c39924c306851747cb.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t足球鞋 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/50a6d63deabf66cab64ebb1c539d0b24.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t羽毛球鞋 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/97fcc096a41d62a3050dcd0da64e83ab.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t运动靴 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/81e82817cd1d6ab76a8eccb8275dd9ac.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t运动T恤 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/72fc877d30614fa2c5506599e7d6fde2.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\tPOLO衫 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/08b798975125131cd0703a82e18705b5.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t背心 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/58982f6bd1638615fbaf6665014174ef.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t运动短裤 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/8e9a5c9426fd31f651979f5bdf7c0926.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t运动胸衣 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/b899743a2e11ba33e731ee4a28a55447.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t卫衣/套头衫 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/84100ce53371bcba029a5cd16f4be959.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t夹克/外套/开衫 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/d9401c9764d59c7831d0ca0f1646e6ac.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t运动长裤 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/2fae8498efca6e655a35830e11978053.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t羽绒服 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/a363ce39051d1de570995d6a59227ce0.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t棉服 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/93736d1f5d9cc76a25e35174f7ea5aca.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t保暖马甲 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/950cf036b933bef023a10b0e590475ad.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t运动套装 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/b8f47cc1027e97c6b2cf1f8e251ddf09.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t运动风衣 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/1e206706c39453bd0ff1422aca95db95.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t衬衫 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/c43c9bb92aead43432e5031a7915c883.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t运动裙 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/f631273bc220de7d43caf01017ecd1f3.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t毛衣/线衫 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/375a79dddc4aa8b0440b85d364a1d846.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t运动背包 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/18fc05b6f3b0673757858adbbf33d635.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t棒球帽 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/e197a49439df82abb6479e9b87385d93.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t针织帽 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/9a8547d7722cd5733eaebab0d8b7fd98.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t袜子 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/29f5764cb771d45523fbcc485a1873ce.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t球类 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/2bf6837936d622f26161d91d11416f09.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t泳具 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/b81623f045fe32b105da00003a5569d7.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t健身器械 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/e08f5be26cf99756c76480bce96ae385.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t手套 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/1a2f17f0ef8a614eee2cfabf656902cd.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t护具 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/6c07653b48c66651efd1ea3b259b1ac8.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t球拍 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/555cf48eb0f3e5a1e0877b925b37ebfc.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t运动毛巾 \n\t\t\t\t\t",
          category: "1"
        },
        {
          img: "/img/6016fa91ec4d42c9a7b8f14e04d0fae4.jpg",
          text: "\n\t\t\t\t\t\t\n\t\t\t\t\t\t运动水壶 \n\t\t\t\t\t",
          category: "1"
        }
      ]
    };
  },

  components: {},

  methods: {
    getData() {
      //let z = localStorage.getItem("type");
      //console.log(localStorage.getItem("type"));
      //console.log(this.num,1)
      // goodsApi
      //   .getGoods({ category: `${z}` })
      //   .then(res => {
      //     console.log(res.data);
      //     this.list = res.data.data;
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    }
  },
  // created() {
  //   //let z = localStorage.getItem("type");
  //   //console.log(localStorage.getItem("type"));
  //   //console.log(this.num,1)
  //   // goodsApi
  //   //   .getGoods({ category: `1` })
  //   //   .then(res => {
  //   //     console.log(res.data);
  //   //     this.list = res.data.data;
  //   //   })
  //   //   .catch(err => {
  //   //     console.log(err);
  //   //   });
  // },
  created() {
    //取出数据渲染
    let i = JSON.parse(localStorage.getItem("classify"));
          this.list = i;
    // if (localStorage.getItem("classify")) {
    //   let i = JSON.parse(localStorage.getItem("classify"));
    //   // console.log(typeof i);
    //   // console.log(i);
    //   this.list = i;
    // }
    // console.log(896)
   
      // goodsApi
      //   .getGoods({ category: `1` })
      //   .then(res => {
      //     console.log(res.data);
      //     localStorage.setItem("classify", JSON.stringify(res.data.data));
      //     let i = JSON.parse(localStorage.getItem("classify"));
      //     this.list = i;
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
  },
  watch: {
    $route: {
      deep: true,
      handler(val) {
        // console.log(val,898981111);
        //let i = val.path.slice(6);
        setInterval(() => {
          let i = JSON.parse(localStorage.getItem("classify"));
          this.list = i;
          // console.log(111111)
        }, 100);
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";
ul {
  
  display: flex;
  justify-content: space-evenly;
  width: vw(570);
  overflow: hidden;
  flex-wrap: wrap;

  li {
    text-align: center;
    margin: 0 vw(1.3);
    a {
      font-size: vw(24);
      color: #999;
      img {
        width: vw(140);
        height: vw(140);
      }
    }
  }
}
.height{
  height:vw(100)
}
</style>
